<template>
  <div class="main-container">
    <div style="margin:10px 0 0 10px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>质量流程管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>产品工序检验指导书</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
    </div>

    <div>
      <el-form :model="formData" inline>
        <el-form-item label="产品型号" label-width="80px">
          <el-input class="w200" v-model="formData.p1"></el-input>
        </el-form-item>
        <el-form-item label="产品名称" label-width="100px">
          <el-input class="w200" v-model="formData.p2"></el-input>
        </el-form-item>
        <el-form-item label="产品状态" label-width="100px">
          <el-input class="w200" v-model="formData.p3"></el-input>
        </el-form-item>
        <el-form-item label="客户单位" label-width="100px">
          <el-input class="w200" v-model="formData.p4"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-table :data="equipmentList" border stripe :span-method="objectSpanMethod">
        <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="f1" label="工序" min-width="100" align="center"></el-table-column>
        <el-table-column prop="f2" label="检验内容" min-width="80" align="center"></el-table-column>
        <el-table-column prop="f3" label="判定标准" min-width="200" align="center"></el-table-column>
        <el-table-column prop="f4" label="检验方式" min-width="120" align="center" sortable></el-table-column>
        <el-table-column prop="f5" label="检测频次" min-width="120" align="center" sortable></el-table-column>
        <el-table-column prop="f6" label="不合格处理方式" min-width="150" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  components: {}
})
export default class EquipmentList extends Vue {
  formData: any = {
    p1: 'P066、P078、P092',
    p2: '分子泵',
    p3: '成品',
    p4: '大同特殊钢'
  }
  submitForm() {}
  equipmentList: any[] = [
    { id: 1.0, f1: '原材料', f2: '尺寸', f3: 'p200圆钢连铸坏料', f4: '卷尺', f5: 0.1, f6: '隔离/退换货' },
    { id: '', f1: '', f2: '外观', f3: '原材料外观无明显缺陷', f4: '目测', f5: 1, f6: '' },
    { id: '', f1: '', f2: '材质', f3: 'SUS304 GB/T20878-2007', f4: '材质单、三方复检', f5: '每批次', f6: '隔离/退换货' },
    { id: 5.0, f1: '锻造及热处理（外包）', f2: '尺寸', f3: '根据作业单', f4: '卷尺', f5: 0.1, f6: '隔离/返工' },
    { id: '', f1: '', f2: '热处理', f3: '固溶确认', f4: '热处理曲线图', f5: '每批次', f6: '隔离/返工' },
    { id: '', f1: '', f2: '外观', f3: '锻件外观无明显缺陷', f4: '目测', f5: 1, f6: '隔离/报废' },
    { id: 10.0, f1: '粗加工', f2: '尺寸', f3: '按 《加工过程卡片》检验', f4: '卡尺', f5: 1, f6: '隔离/返修/报废' },
    { id: '', f1: '', f2: '外观', f3: '外观无明显缺陷', f4: '目测', f5: 1, f6: '隔离/返修/报废' },
    { id: 15.0, f1: '探伤', f2: 'UT', f3: 'JB 3963-85 Ⅱ级', f4: '超声波检测仪', f5: 1, f6: '隔离/报废' },
    { id: 20.0, f1: '精加工', f2: '线性尺寸', f3: '按图检验', f4: '卡尺', f5: 1, f6: '隔离/返修/报废' },
    { id: '', f1: '', f2: '粗糙度', f3: '', f4: '粗糙度检测仪', f5: '', f6: '' },
    { id: '', f1: '', f2: '螺纹通止', f3: '', f4: '塞规', f5: '', f6: '' },
    { id: '', f1: '', f2: '外观', f3: '外观无明显缺陷', f4: '目测', f5: 1, f6: '' },
    { id: 25.0, f1: '探伤', f2: 'PT', f3: '无任何表面缺陷', f4: 'PT探伤剂/目测', f5: 1, f6: '隔离/报废' },
    { id: 30.0, f1: '三坐标检测', f2: '形位公差', f3: '按图检验', f4: '三坐标设备', f5: 1, f6: '隔离/返修/报废' },
    { id: 35.0, f1: '清整', f2: '外观', f3: '无磕碰划伤、飞边毛刺、', f4: '目测', f5: 1, f6: '隔离/返修/报废' },
    { id: 36.0, f1: '※刻印（P092专有工序）', f2: '标识', f3: '铸蚀、缺陷、变形等 《P092刻印查指示書》', f4: '目测', f5: 1, f6: '隔离/返修' },
    { id: 40.0, f1: '质量报告', f2: '-', f3: '《P092生產指示書》 将材质单（含复检）、热处 理曲线、尺寸记录、三坐标 报告、UT/PT报告整理汇总', f4: '-', f5: '-', f6: '修正' }
  ]
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // 2行1列合并
    if ((columnIndex === 0 && rowIndex == 6) || (columnIndex === 1 && rowIndex == 6)) {
      return {
        rowspan: 2,
        colspan: 1
      }
    }
    // 3行1列合并
    if (
      (columnIndex === 0 && rowIndex == 0) ||
      (columnIndex === 0 && rowIndex == 3) ||
      (columnIndex === 1 && rowIndex == 0) ||
      (columnIndex === 1 && rowIndex == 3) ||
      (columnIndex === 3 && rowIndex == 9) ||
      (columnIndex === 5 && rowIndex == 9)
    ) {
      return {
        rowspan: 3,
        colspan: 1
      }
    }
    // 4行1列合并
    if ((columnIndex === 0 && rowIndex == 9) || (columnIndex === 1 && rowIndex == 9) || (columnIndex === 6 && rowIndex == 9)) {
      return {
        rowspan: 4,
        colspan: 1
      }
    }

    // 被合并的单元格坐标需要返回 0,0
    if (
      (columnIndex === 0 && rowIndex === 1) ||
      (columnIndex === 0 && rowIndex === 2) ||
      (columnIndex === 0 && rowIndex === 4) ||
      (columnIndex === 0 && rowIndex === 5) ||
      (columnIndex === 1 && rowIndex === 1) ||
      (columnIndex === 1 && rowIndex === 2) ||
      (columnIndex === 1 && rowIndex === 4) ||
      (columnIndex === 1 && rowIndex === 5) ||
      (columnIndex === 0 && rowIndex === 7) ||
      (columnIndex === 1 && rowIndex === 7) ||
      (columnIndex === 3 && rowIndex === 10) ||
      (columnIndex === 3 && rowIndex === 11) ||
      (columnIndex === 5 && rowIndex === 10) ||
      (columnIndex === 5 && rowIndex === 11) ||
      (columnIndex === 0 && rowIndex === 10) ||
      (columnIndex === 0 && rowIndex === 11) ||
      (columnIndex === 0 && rowIndex === 12) ||
      (columnIndex === 1 && rowIndex === 10) ||
      (columnIndex === 1 && rowIndex === 11) ||
      (columnIndex === 1 && rowIndex === 12) ||
      (columnIndex === 6 && rowIndex === 10) ||
      (columnIndex === 6 && rowIndex === 11) ||
      (columnIndex === 6 && rowIndex === 12)
    ) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
